<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

import zhishu from '@assets/zhishu.png'
import ziyuan8 from '@assets/z8.png'

export default {
  name: 'chart-customized-graph-img',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'graph'
    }
  },

  computed: {
    option () {
      let vm = this
      let imgurl = 'image://' + zhishu
      let data = []
      this.data.forEach((node, index) => {
        let itemStyle = {
          // color: vm.colors[index]
        }
        let lineStyle = {
          opacity: 1,
          width: 3,
          // color: 'target',
          color: node.color2,
          curveness: 0
        }
        let position = 'inside'
        let color = '#fff'
        let fontWeight = 700
        if ((node.sourcenode === '阳光指数' || node.sourcenode === '创新指数') && node.category === 2) {
          position = 'right'
          color = '#b8d1ff'
          fontWeight = 400
        } else if ((node.sourcenode === '发展指数' || node.sourcenode === '服务指数') && node.category === 2) {
          position = 'left'
          color = '#b8d1ff'
          fontWeight = 400
        }
        let label = {
          show: true,
          formatter: function (params) {
            let value = params.data.name
            if (node.category === 0 && vm.minSize) {
              value = `${value.slice(0, 2)}\n${value.slice(2)}`
            }
            return value
          },
          textStyle: {
            fontSize: node.fontSize,
            lineHeight: parseInt(node.fontSize) + 5,
            fontWeight: fontWeight,
            color: color
          },
          position: position
        }
        let symbolSize = 100
        let symbol = null

        if (node.category === 0) {
          symbolSize = 70
        } else if (node.category === 1) {
          symbolSize = 70
        } else if (node.category === 2) {
          symbolSize = 10
          // label.position = "bottom"
        }

        itemStyle.color = new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
          offset: 0,
          color: node.color1
        },
        {
          offset: 1,
          color: node.color2
        }])

        if (node.name === '') {
          symbol = imgurl
        }
        data.push({
          ...node,
          fixed: true,
          symbol: symbol,
          label: label,
          lineStyle: lineStyle,
          itemStyle: itemStyle
        })
      })

      let series = [{
        type: 'graph',
        layout: 'none',
        edgeSymbol: ['circle', 'none'],
        edgeSymbolSize: [0, 10],
        // 连接线上的文字
        focusNodeAdjacency: false, //划过只显示对应关系
        lineStyle: {
          opacity: 1,
          width: 1,
          color: new echarts.graphic.LinearGradient(0, 0, 0,1, [{
            offset: 0,
            color: '#35c2ff'
          },
          {
            offset: 1,
            color: '#157eff'
          }]),
          curveness: 0
        },
        data: data,
        links: this.datalink
      }]


      return {
        // color: this.colors,
        animation: true,
        series: series
      }
    }
  },

  methods: {
    setSeries () {
    },
    setOption () {
      if (this.data.length > 0) {
        this.chart.setOption(this.option, true)
        if (this.useLiandong) {
          this.chart.off('click')
          this.chart.on('click', this.handleclick)
        }
        this.resize()
      }
    },
    handleclick (params) {
      // console.log(params)
      if (params.data.href) {
        if (params.data.target === '_blank') {
          window.open(params.data.href, '_blank')
        } else {
          window.location.href = params.data.href
        }
      }
    },
  },

  watch: {
    seriesIsRow () {
      this.setSeries()
    },

    isSmooth () {
      this.setSeries()
    },

    areaStyle () {
      this.setSeries()
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
